<script setup>
import {onMounted,ref,onUpdated} from 'vue'
import {onBeforeRouteUpdate, useRoute} from 'vue-router'
import {category} from '@/api/category.ts'
import Banner from './component/Banner.vue'
import GoodsItem from '@/views/Home/components/GoodsItem.vue';
const route = useRoute()
const categoryData = ref({})
const getCategory = async (id = route.params.id)=>{
    const res = await category(id)
    categoryData.value = res.data.result
}
onMounted(() => {
    getCategory();
})
onBeforeRouteUpdate((to)=>{
    getCategory(to.params.id)
})
</script>
<template>
    <!-- 面包屑 -->
    <div class="container">
        <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{categoryData.name}}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <!-- 轮播 -->
    <Banner/>

    <!-- 二级路由 -->
    <div class="container">
        <h1>全部分类</h1>
        <ul >
            <li v-for="(item,i) in categoryData.children" :key="i">
                <router-link :to="`sub/${item.id}`">
                    <img :src="item.picture" alt="">
                   <p> {{ item.name }} </p>
                </router-link>
            </li>
        </ul>
    </div>

    <!-- 商品列表 -->
    <div class="container">
        <ul class="subProudct">
            <li v-for="(item,i) in categoryData.children" :key="i">
                <h2><router-link :to="`sub/${item.id}`">—— {{ item.name }} ——</router-link></h2>
                <GoodsItem :goods="item.goods"/>
            </li>
        </ul>
    </div>
</template>
<style scoped lang="scss">
    .container{
       margin-top: 15px;
       h1{
        text-align: center;
        margin-bottom: 30px;
       }
       ul{
        display: flex;
        justify-content: space-between;
        padding: 0 40px;
        img{
            width: 120px;
            height: 120px;
        }
        text-align: center;
        p{
            margin-top: 8px;
        }
       }
    }
    .container .subProudct{
        display: block;
        ul{
            margin: 0 auto;
        }
    }
</style>